<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar{
				box-shadow: none
			}
			
			.mui-icon{
				color: #343434;
			}
			
			.mui-pull-bottom-tips {
				text-align: center;
				background-color: #efeff4;
				font-size: 15px;
				line-height: 30px;
				color: #777;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				background-color: #efeff4;
			}
			
			.mui-scroll {
				width: 100%!important;
				height: auto!important;
				border: 0!important;
			}
			
			.mui-control-item {
				width: 50%!important;
			}
			
			.height-div {
				margin-top: 1px;
			}
			
			.mui-scroll-wrapper {
				margin-left: 0;
				padding: 0!important;
			}
			
			.mui-scroll-wrapper ul {
				list-style: none;
				margin: 0;
				padding: 0;
			}
			#sliderProgressBar{
				width: 50%!important;
				margin-top: -2px;
				z-index: 99;
				position: relative;
			}
			
			.mui-slider-group {
				margin-top: -2px;
			}
			
			.ul-licontent {
				border-bottom: 1px solid #F7F7F7;
			}
			
			.ul-licontent .text1 {
				float: right;
				color: red;
			}
			
			.ul-licontent .text2 {
				margin-left: 5%;
			}
			
			.mui-card {
				width: 100%;
				margin-left: 0;
				margin-top: 0;
				box-shadow: none;
				margin-bottom: 0;
				padding: 0;
			}
			
			.ul-licontent {
				width: 100%;
			}
			
			.imggg {
				width: 35px!important;
			}
			
			.fiends-div {
				width: 100%;
				background-color: white;
				border-bottom: 1px solid #F7F7F7;
				padding: 3% 0;
				font-size: 100%;
				display: flex;
				flex-wrap: nowrap;
			}
			
			.imggs-div {
				width: 25%;
				margin-right: 3%;
				margin-left: 3%;
				border-radius: 2px;
				overflow: hidden;
			}
			
			.conttext-div {
				width: 69%;
				display: flex;
				flex-wrap: wrap;
				padding: 0;
			}
			
			.conttext-div .div1 {
				display: block;
				width: 100%;
				padding: 0;
				font-size: 100%;
			}
			
			.div2 {
				color: red;
				font-size: 80%;
			}
			
			.div3 {
				color: #A9A9A9;
				font-size: 80%;
			}
			
			.schoolarea {
				float: right;
				margin-right: 4%
			}
			
			@keyframes myfirst {
				0% {
					transform: translate(0px, 0px);
				}
				50% {
					transform: translate(0px, -10px);
				}
				100% {
					transform: translate(0px, 0px);
				}
			}
		</style>
	</head>

	<body>
		
		<header class="mui-bar mui-bar-nav" id="header">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的发布</h1>
		</header>
		
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted height-div">
					<div class="mui-scroll">
						<a class="mui-control-item mui-active" href="#item1mobile">
							兼职发布
						</a>
						<a class="mui-control-item" href="#item2mobile">
							商品发布
						</a>
					</div>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="myjianzhi"></ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view" id="mygoods"></ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.pullToRefresh.js"></script>
		<script src="../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../js/immersed.js"></script>
		<script src="../../js/arttmpl.js"></script>
		<script type="text/javascript">
			(function($) {
				$.init({
				  	gestureConfig:{
				   		longtap: true //默认为false
				  	}
				});

				//阻尼系数
				var deceleration = mui.os.ios ? 0.003 : 0.0009;
				$('.mui-scroll-wrapper').scroll({
					bounce: false,
					indicators: false, //是否显示滚动条
					deceleration: deceleration
				});
				$.ready(function() {
					//循环初始化所有下拉刷新，上拉加载。
					$.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
						$(pullRefreshEl).pullToRefresh({
							up: {
								callback: function() {
									var self = this;
									setTimeout(function() {
										var ul = self.element.querySelector('.mui-table-view');
										ul.appendChild(createFragment(ul, index, 5));
										self.endPullUpToRefresh();
									}, 1000);
								}
							}
						});
					});
					var createFragment = function(ul, index, count, reverse) {
						var length = ul.querySelectorAll('li').length;
						var fragment = document.createDocumentFragment();
						var li;
						for(var i = 0; i < count; i++) {
							li = document.createElement('li');
							li.className = 'mui-table-view-cell';
							li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));
							fragment.appendChild(li);
						}
						return fragment;
					};
				});

				var alljianzhifabu = function() {
					$.ajax('https://www.lunyuwang.com/taskController/queryMyTask', {
						data: {
							lyuser_Card: plus.storage.getItem("card")
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							console.log(JSON.stringify(data.queryMyTaskList));
							var str = template('list-jianzhi', {
								"record": data.queryMyTaskList
							})
							document.getElementById('myjianzhi').innerHTML = str;
						},
						error: function(xhr, type, errorThrown) {
							$.toast('发布异常!')
						}
					})
				}

				var allgoodsshow = function() {
					$.ajax('https://www.lunyuwang.com/taskController/queryMyGood', {
						data: {
							lygood_Card: plus.storage.getItem("card")
						},
						crossDomain: true, //强制使用5+跨域
						dataType: 'json', //服务器返回json格式数据
						type: 'get', //HTTP请求类型
						timeout: 10000, //超时时间设置为10秒；
						//processData: false,
						headers: {
							'Content-Type': 'application/x-www-form-urlencoded'
						},
						success: function(data) {
							var allcontentt = data.queryMyGoodList;
							console.log(JSON.stringify(data.queryMyGoodList));
							for(var i = 0; i < allcontentt.length; i++) {
								var a = [];
								var b = [];
								if(allcontentt[i].lygood_Collage.length > 10) {
									for(var k = 0; k < 10; k++) {
										b[j] = allcontentt[i].lygood_Collage[k];
									}
									allcontentt[i].lygood_Collage = b.join("") + "..."
								}
								if(allcontentt[i].lygood_Text.length > 25) {
									for(var j = 0; j < 25; j++) {
										a[j] = allcontentt[i].lygood_Text[j]
									}
									allcontentt[i].lygood_Text = a.join("") + "...";
								}
							}
							var str = template('list-secondshop', {
								"record": allcontentt

							})
							document.getElementById('mygoods').innerHTML = str;
							var viewwidth = document.body.clientWidth;
							var divimg = document.getElementsByClassName('imggs-div');
							$('.imggs-div').each(function() {
								this.style.height = "-webkit-calc(" + viewwidth * 0.25 + "px)";
								var num = viewwidth * 0.25 * 0.428 / 2;
								this.getElementsByTagName("img")[0].style.cssText = "width: -webkit-calc(" + viewwidth * 0.25 * 1.428 + "px);height: -webkit-calc(" + viewwidth * 0.25 + "px);margin-left: -webkit-calc(" + (-num) + "px)"
							})
						},
						error: function(xhr, type, errorThrown) {
							$.toast('发布异常!')
						}
					})
				}
				$.plusReady(function() {
					starbar();
					plus.navigator.setStatusBarStyle('dark');
					document.getElementById('slider').style.marginTop = immersed + 'px';
					
					alljianzhifabu();
					allgoodsshow();

					$('.mui-table-view').on('tap', '.ul-licontent', function() {
						var id = this.getElementsByTagName('p')[0];
						$.openWindow({
							url: 'myjanzhiXQ.html',
							id: 'myjanzhiXQ.html',
							extras: {
								idd: id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim()
							}
						})
					});
					
					$('.mui-table-view').on('longtap', '.ul-licontent', function() {
						var _this = this;
						var id = this.getElementsByTagName('p')[0];
						alert(id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim());
						$.confirm('确认删除？', function(e) {
							_this.getElementsByTagName('div')[0].style.cssText = 'background-color: #FFFFFF';
							if(e.index == 0) {
								$.ajax('https://www.lunyuwang.com/taskController/deleteMyTask', {
									data: {
										lytask_Idd: id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim()
									},
									crossDomain: true, //强制使用5+跨域
									dataType: 'json', //服务器返回json格式数据
									type: 'get', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									//processData: false,
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									success: function(data) {
										if(data.state == 1){
											$.toast("删除成功!");
											_this.parentNode.removeChild(_this);
										}else{
											$.toast("删除异常,请重新操作")
										}
									},
									error: function(xhr, type, errorThrown) {
										$.toast('删除异常!')
									}
								})
							}
						})
					}, false);
					
					$('.mui-table-view').on('longtap', '.ul-liicontent', function() {
						var _this = this;
						var id = this.getElementsByTagName('p')[0];
						var imgs = this.getElementsByTagName('span')[0];
						$.confirm('确认删除？', function(e) {
							_this.getElementsByTagName('div')[0].style.cssText = 'background-color: #FFFFFF';
							if(e.index == 0) {
								$.ajax('https://www.lunyuwang.com/taskController/deleteMyGood', {
									data: {
										lygood_Idd: id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim(),
										lygood_Img: imgs.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim()
									},
									crossDomain: true, //强制使用5+跨域
									dataType: 'json', //服务器返回json格式数据
									type: 'get', //HTTP请求类型
									timeout: 10000, //超时时间设置为10秒；
									//processData: false,
									headers: {
										'Content-Type': 'application/x-www-form-urlencoded'
									},
									success: function(data) {
										if(data.state == 1){
											$.toast("删除成功!");
											_this.parentNode.removeChild(_this);
										}else{
											$.toast("删除异常,请重新操作")
										}
									},
									error: function(xhr, type, errorThrown) {
										$.toast('删除异常!')
									}
								})
								
							}
						})
					}, false);
					
					
					$('.mui-table-view').on('touchstart', '.mui-card', function() {
						this.style.cssText = 'background-color: #F7F7F7'
					}, false);
					$('.mui-table-view').on('touchend', '.mui-card', function() {
						this.style.cssText = 'background-color: #FFFFFF';
					}, false);

					$('.mui-table-view').on('touchstart', '.fiends-div', function() {
						this.style.cssText = 'background-color: #F7F7F7'
					}, false);
					$('.mui-table-view').on('touchend', '.fiends-div', function() {
						this.style.cssText = 'background-color: #FFFFFF';
					}, false);

					$('.mui-table-view').on('tap', '.ul-liicontent', function() {
						var id = this.getElementsByTagName('p')[0];
						$.openWindow({
							url: 'myshop.html',
							id: 'myshop.html',
							extras: {
								idd: id.textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim()
							}
						})
					})
					
					
					window.addEventListener('del_thetask', function(event) {
						$('.ul-licontent').each(function(){
							if(this.getElementsByTagName('p')[0].textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim() == event.detail.iid){
								this.parentNode.removeChild(this);
							}
						})
					})
					
					window.addEventListener('del_thegoods', function(event) {
						$('.ul-liicontent').each(function(){
							if(this.getElementsByTagName('p')[0].textContent.replace(/<[^>]+>|&[^>]+;/g, "").trim() == event.detail.iid){
								this.parentNode.removeChild(this);
							}
						})
					})
				})
			})(mui);
		</script>

		<!--兼职列表渲染模板-->
		<script type="text/template" id="list-jianzhi">
			<% for(var i in record){ var item=record[i]; %>
			<li class="ul-licontent">
				<p style="display: none;">
					<%=item.lytask_Id%>
				</p>
				<div class="mui-card">
					<div class="mui-card-header mui-card-media cardtop">
						<img src="<%=item.lyuser_FacePath%>" class="imggg" />
						<div class="mui-media-body">
							<%=item.lytask_Title%><text class='text1'><%=item.lytask_Pay%></text>
							<p>
								<%=item.lytask_Adress%><text class='text2'><%=item.lytask_Cycle%></text></p>
							<p>
								<%=item.lytask_Time.substring(0,19)%>
							</p>
						</div>
					</div>
				</div>
			</li>
			<% } %>
		</script>

		<!--二手市场列表渲染模板-->
		<script type="text/template" id="list-secondshop">
			<% for(var i in record){ var item=record[i]; %>
			<li class="ul-liicontent">
				<p style="display: none;"><%=item.lygood_Id%></p>
				<span style="display: none;"><%=item.lygood_Img%></span>
				<div class="fiends-div">
					<!--<text class="card-div"><%=item.card%></text>-->
					<div class="imggs-div">
						<img src="<%=item.lygood_Img.split(',')[0]%>" class="friend-heddimg" id="headmiggg" />
					</div>

					<div class="conttext-div">
						<div class="div1">
							<%=item.lygood_Text%>
						</div>
						<div class="div1 div2">
							￥
							<%=item.lygood_Price%>
						</div>
						<div class="div1 div3">
							<%=item.lygood_Area%>
							<% if(item.lygood_Collage != "0" ){ %>
							<div class="schoolarea">
								<%=item.lygood_Collage%>
							</div>
							<% } %>
						</div>
					</div>
				</div>
			</li>
			<% } %>
		</script>
	</body>

</html>